<template>
  <div>
    <!-- 头部 -->
    <Topnav titleTxt="注册"></Topnav>
    <div class="logo">
      <span class="iconfont iconnew"></span>
    </div>
    <form action class="form">
      <autoInput
        inputtype="text"
        iplaceholder="用户名/手机号"
        rule="^.{3,10}$"
        errmsg="请输入正确用户名"
        @sendValue="getUser"
      ></autoInput>
      <autoInput
        inputtype="text"
        iplaceholder="昵称"
        rule="[\u4E00-\u9FA5\s]"
        errmsg="请输入正确的昵称（汉字），不能包含数字"
        @sendValue="getNiChen"
      ></autoInput>
      <autoInput
        inputtype="password"
        iplaceholder="密码"
        rule="^.{3,10}$"
        errmsg="请输入正确的密码格式，不少于6位"
        @sendValue="getUserPwd"
      ></autoInput>
      <autoBtn btntext="注册" @ClickBtn="handleReg"></autoBtn>
      <router-view></router-view>
    </form>
  </div>
</template>

<script>
import autoInput from "@/components/AutoInput.vue";
import autoBtn from "@/components/AutoBtn.vue";
import Topnav from "@/components/TopNav.vue";
export default {
  data() {
    return {
      username: "",
      userpwd: "",
      nichen: ""
    };
  },
  components: {
    autoInput,
    autoBtn,
    Topnav
  },
  methods: {
    handleReg(event) {
      console.log("这里是注册测试按钮", event.target);
      this.$axios({
        url: "/register",
        method: "POST",
        data: {
          username: this.username,
          password: this.userpwd,
          nickname: this.nichen
        }
      })
        .then(res => {
          console.log(res);
          // console.log(res.data.message);
          const { statusCode, message } = res.data;
          if (!statusCode) {
            this.$dialog.alert({
              //这里是注册成功的信息
              message
            });
          }
        })
        .catch(err => {
          this.$toast.fail("系统错误");
        });
    },
    getUser(username) {
      this.username = username;
    },
    getNiChen(nichen) {
      this.nichen = nichen;
    },
    getUserPwd(password) {
      this.userpwd = password;
    }
  }
};
</script>
<style lang="less" scoped>
body {
  background: url("../images/bg1.jpg") no-repeat center;
}
.closeBtn {
  padding: 24px;
  color: #fff;
  span {
    font-size: 7.5vw;
  }
}
.logo {
  text-align: center;
  span {
    font-size: 35vw;
    color: #ea2e03;
  }
}
.form {
  text-align: center;
}
.mask {
  border-radius: 6%;
  padding-top: 5.556vw;
  color: green;
}
.link {
  display: flex;
  padding: 5.556vw;
  justify-content: space-between;
}
</style>
